<!-- 个人中心 -->
<template>
	<view class="components-theme">
		
		<view style="" class="header">
			<image src="@/static/mao/m.png" style="" class="img" mode="widthFix"></image>
			<view style="" class="nickname">
				<text style="font-weight: bold;">
					{{userinfo.nickname}}
				</text>
				
				<text style="color: #9c9c9c;">
					QQ:{{userinfo.qq || '暂未绑定'}}
				</text>
			</view>
		</view>
		
		<view style="display: flex;margin-top: 60rpx;">
			<view style="width: 45%;margin-right:5%;background: #CECECE;height: 150rpx;border-radius: 40rpx;padding: 20rpx 20rpx 30rpx 30rpx;" @click="navTo(`/pages/me/recharge`)"> 
				<text style="display: inline-block;font-size: 25rpx;">
					当前余额
				</text>
				<view style="">
					<text style="font-weight: bold;font-size: 50rpx;display: inline-block;">
						{{userinfo.money}}
					</text>
				</view>
			</view>
			
			<view style="width: 45%;margin-left:5%;background: #CECECE;height: 150rpx;border-radius: 40rpx;padding: 20rpx 20rpx 30rpx 30rpx;;">
				<text style="display: inline-block;font-size: 25rpx;">
					剩余积分
				</text>
				<view style="">
					<text style="font-weight: bold;font-size: 50rpx;display: inline-block;">
						{{userinfo.score}}
					</text>
				</view>
			</view>
		</view>

		<view style="margin-top: 64rpx;">
			<view style="margin-bottom: 40rpx;" @click="navTo(`/pages/me/order`)">
				<u-cell-group>
					<u-cell-item  title="历史订单"></u-cell-item>
				</u-cell-group>
			</view>
			<view style="margin-bottom: 40rpx;"  @click="navTo(`/pages/me/kabao`)">
				<u-cell-group>
					<u-cell-item  title="我的卡包"></u-cell-item>
				</u-cell-group>
			</view>
			<view style="margin-bottom: 40rpx;" @click="navTo('/pages/me/helper')">
				<u-cell-group>
					<u-cell-item  title="常见问题"></u-cell-item>
				</u-cell-group>
			</view>
			<view style="margin-bottom: 40rpx;"  @click="navTo(`/pages/me/cart`)">
				<u-cell-group>
					<u-cell-item  title="购物车"></u-cell-item>
				</u-cell-group>
			</view>
		</view>

	</view>
</template>

<script>
	var videoAd = null;
		import request from '@/common/request.js';
	export default {
		data() {
			return {
				spaceShow:true,
				modalName: null,
				picName: '流星之夜',
				pic: [],
				topBackGroupImageIndex: 5,
				inter: [],
				userinfo:{}
			}
		},

		watch:{
			topBackGroupImageIndex(val) {
				console.log(val)
				if (val == 4 || val == 5 ) {
					this.spaceShow = true;
				}else{
					this.spaceShow = false;
				}
			}
		},
		mounted() {
			let user = uni.getStorageSync('userInfo');
			if(!user){
				uni.showToast({ title:'请先登录', icon: 'none' });
				setTimeout(()=>{
					uni.navigateTo({
						url:`/pages/public/login`
					})
				},1000)
			}
			this.init();
		},
		methods: {
			init(){
				let opts2 = {
					url: 'api/user/userinfo',
					method: 'get'
				};
				request.httpTokenRequest(opts2).then((res)=>{
					if(res.data.code == 401){
						uni.showToast({ title:'请先登录', icon: 'none' });
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/public/login`
							})
						},1000)
						return ;
					}
					this.userinfo = res.data.data;
				})
			},
			navTo(url){
				uni.navigateTo({
					url
				})
				
				return;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #f2f2f2;
	}
	.components-theme{
		padding: 30rpx;
		.header{
			display: flex;margin-top: 100rpx;
			.img{
				width: 170rpx;box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);border-radius: 50%;border: 2rpx solid #333;
			}
			.nickname{
				float: left;margin-left: 30rpx;display: flex;flex-direction:column;justify-content:space-evenly
			}
		}
	}
	
	/deep/ .u-cell-item-box{
		border-radius: 40rpx;
		box-shadow: 0 5rpx 6upx rgba(0, 0, 0, 0.1);
		
	}
	
	/deep/ .u-cell{
		height: 132rpx;
		background: #f2f2f2;
	}
	
</style>
